<link rel="stylesheet" href="ccay/example/demo.css"  type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/htmlstyle/search.js" charset="utf-8"></script>

<div id="searchDemo">
<div title='API' tabid='tab1' style="line-height: 200%">
<h2>所有表单采用流布局</h2>
<div>
<pre>
<font color="green">//所有的表单以form标签定义，class必须包括ccay-form，如果需要做验证的表单class加上init</font>
<font color="blue">&lt;form class="init ccay-form" &gt;</font>
<font color="green">//区域内容以div标签包括，基础class="ccay-form-body"</font>
<font color="blue">&lt;div class="ccay-form-body"&gt;</font>
<font color="green">//主内容使用ul标签</font>
<font color="blue">&lt;ul&gt;</font>
<font color="green">//录入单位为一个title和一个input为主体，以li标签，基础class="ccay-form-row"，另外根据不同需求可以加入相应的class</font>
<font color="blue">&lt;li class="ccay-form-row"&gt;</font>
<font color="green">//title使用为samp标签，无基础样式，需要国际化处理的加上i18n样式，以及国际化属性i18nKey</font>
<font color="blue">&lt;samp class="i18n" i18nKey="label.htmlarea.category"&gt;text xxxx xxxxxxx xxxxx&lt;/samp&gt;</font>
<font color="green">//input或者View内容使用span标签, class='ccay-form-input'</font>
<font color="blue">&lt;span class='ccay-form-input'&gt;&lt;input id='txtText'  type="text" /&gt;&lt;/span&gt;</font>
<font color="blue">&lt;/li&gt;</font>
<font color="blue">&lt;li class="ccay-form-row"&gt;</font>
<font color="blue">&lt;samp&gt;date&lt;/samp&gt;</font>
<font color="green">//View内容,span标签下使用label标签></font>
<font color="blue">&lt;span class='ccay-form-input'&gt;&lt;label /&gt;&lt;/span&gt;</font>
<font color="blue">&lt;/li&gt;</font>
<font color="blue">&lt;/ul&gt;</font>
<font color="blue">&lt;/div&gt;</font>
<font color="green">//操作区域与内容同级，div标签，class="ccay-operate" 内部可以使用input[button]和link button(a标签)</font>
<font color="blue">&lt;div class="ccay-operate"&gt;</font>
<font color="blue">&lt;input type="button" value="Input Button" /&gt;</font>
<font color="blue">&lt;/div&gt;</font>
<font color="blue">&lt;/form&gt;</font>
</pre>
</div>
<hr>
<h2>流布局元素扩展使用说明</h2>
<h4></h4>
<h3>区域内容div</h3>
<table class="ccay-table">
<tr>
<td width="20%">样式</td>
<td width="20%">样式名</td>
<td width="60%">说明</td>
</tr>
<tr>
<td>基础样式</td>
<td>ccay-form-body</td>
<td></td>
</tr>
<tr>
<td>自定义样式</td>
<td>ccay-form-custom</td>
<td>自定义格式时使用。如：录入区域或者是显示区域为不确定内容时，或者是动态高度时</td>
</tr>
<tr>
<td>基础样式补充样式</td>
<td>ccay-form-bodymore</td>
<td>一般用于上一个区域为自定义样式ccay-form-custom后使用，与基础样式同时使用，如：&lt;div class="ccay-form-body ccay-form-bodymore"&gt;</td>
</tr>
<tr>
<td>自定义样式补充样式</td>
<td>ccay-form-custommore</td>
<td>用于在form中自定义样式ccay-form-custom为第一个元素时使用，与基础样式同时使用，如：&lt;div class=" ccay-form-custom ccay-form-custommore"&gt;</td>
</tr>
</table>

<h3>单元区域li</h3>
<table class="ccay-table">
<tr>
<td width="20%">样式</td>
<td width="20%">样式名</td>
<td width="60%">说明</td>
</tr>
<tr>
<td>基础样式</td>
<td>ccay-form-row</td>
<td>此样式必须存在，其他样式都为补充样式</td>
</tr>
<tr>
<td>范围选择样式</td>
<td>ccay-form-range</td>
<td>范围选择或前后关联的两个input使用，如，日期选择；列：&lt;li class="ccay-form-row ccay-form-range"&gt;
</td>
</tr>
<tr>
<td>单区域样式</td>
<td>ccay-form-whole</td>
<td>多行文本使用，固定为一整行，不随流布局变化，列：&lt;li class="ccay-form-row ccay-form- whole "&gt;</td>
</tr>
<tr>
<td>长文本样式</td>
<td>ccay-form-longcell</td>
<td>单行长文本或者比普通单元格长时使用，列：&lt;li class="ccay-form-row ccay-form- longcell "&gt;</td>
</tr>
<tr>
<td>More样式</td>
<td>ccay-form-more</td>
<td>仅针对more等操作单元使用，列：&lt;li class="ccay-form-row ccay-form- more "&gt;</td>
</tr>
</table>

<h3>form下其它样式</h3>
<table class="ccay-table">
<tr>
<td width="20%">样式</td>
<td width="20%">样式名</td>
<td width="60%">说明</td>
</tr>
<tr>
<td>samp</td>
<td>require</td>
<td>必填效果</td>
</tr>
<tr>
<td>input[text]</td>
<td>longtxt</td>
<td>长文本效果
</td>
</tr>
</table>
</div>	
	<div title='Demo' tabid='tab2'>
		<div>
			<div>
			    <h4><span>实例1：单个查询条件占一行</span></h4>
			    <div style='padding-left:30px'>
			    <div>
				<form class="init ccay-form" >					    
				<div class="ccay-form-body">
				 <ul>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="title" ></samp>
						<span class="ccay-form-input">
						   <input type="text" maxlength="200" />
						</span>
					</li>			
				 </ul>
		         </div>
		         <div class="ccay-operate">
		         	<span class="ccay-button default" >
						<a class="ccay-icon search"></a>
						<label class="i18n" i18nKey="ccay.common.button.search"></label>
					</span>
					<span class="init button ccay-button reset" >
						<a class="ccay-icon reset"></a>
						<label class="i18n" i18nKey="ccay.common.button.reset"></label>
					</span>
				</div>		         
				</form>
				</div>
							<div>
			</div>
			<h3>HTML Code</h3>
			<div class="codeArea" >
				<pre id='searchForm'>
&lt;!--<font color="green">所有的表单以form标签定义，class必须包括ccay-form，如果需要做验证的表单class加上init</font>--&gt;				
&lt;form class="init ccay-form" &gt;	
&lt;!--<font color="green">区域内容以div标签包括，基础class="ccay-form-body"</font>--&gt;				    
&lt;div class="ccay-form-body"&gt;
&lt;!--<font color="green">主内容使用ul标签</font>--&gt;
 &lt;ul&gt;
&lt;!--<font color="green">录入单位为一个title和一个input为主体，以li标签，基础class="ccay-form-row"，另外根据不同需求可以加入相应的class</font>--&gt;
	&lt;li class="ccay-form-row"&gt;
		&lt;samp class="i18n" i18nKey="title" /&gt;&lt;/samp&gt;
		&lt;span class="ccay-form-input"&gt;
		   &lt;input type="text" maxlength="200" /&gt;
		&lt;/span&gt;
	&lt;/li&gt;			
 &lt;/ul&gt;
       &lt;/div&gt;
&lt;!--<font color="green">操作区域与内容同级，div标签，class="ccay-operate" 内部可以使用input[button]和link button(a标签)</font>--&gt;
&lt;div class="ccay-operate"&gt;
	&lt;span class="ccay-button default" >
		&lt;a class="ccay-icon search">&lt;/a>
		&lt;label class="i18n" i18nKey="ccay.common.button.search">&lt;/label>
	&lt;/span>
	&lt;span class="init button ccay-button reset" >
		&lt;a class="ccay-icon reset">&lt;/a>
		&lt;label class="i18n" i18nKey="ccay.common.button.reset">&lt;/label>
	&lt;/span>
&lt;/div&gt;		         
&lt;/form&gt;
				</pre>
			</div>
		<div class='try'>
			<a onclick="Ccay.example.openTry('#searchDemo','',$('#searchForm').html())">亲自试一试</a>
		</div>
		</div>
				<h4><span>实例2：多个查询条件占一行</span></h4>
				<div style='padding-left:30px'>
				<form class="init ccay-form" >					    
				<div class="ccay-form-body">
				 <ul>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="title" ></samp>
						<span class="ccay-form-input">
						   <input type="text" maxlength="200" />
						</span>
					</li>	
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="title" ></samp>
						<span class="ccay-form-input">
						   <input type="text" maxlength="200" />
						</span>
					</li>
				 </ul>
		         </div>
		         <div class="ccay-operate">
		         	<span class="ccay-button default" >
						<a class="ccay-icon search"></a>
						<label class="i18n" i18nKey="ccay.common.button.search"></label>
					</span>
					<span class="init button ccay-button reset" >
						<a class="ccay-icon reset"></a>
						<label class="i18n" i18nKey="ccay.common.button.reset"></label>
					</span>
				</div>
				</form>
			<div>
			</div>
			<h3>HTML Code</h3>
			<div class="codeArea">
				<pre id='searchForm2'>
&lt;!--<font color="green">所有的表单以form标签定义，class必须包括ccay-form，如果需要做验证的表单class加上init</font>--&gt;	
&lt;form class="init ccay-form" &gt;
&lt;!--<font color="green">区域内容以div标签包括，基础class="ccay-form-body"</font>--&gt;						    
&lt;div class="ccay-form-body"&gt;
&lt;!--<font color="green">主内容使用ul标签</font>--&gt;
 &lt;ul&gt;
&lt;!--<font color="green">录入单位为一个title和一个input为主体，以li标签，基础class="ccay-form-row"，另外根据不同需求可以加入相应的class</font>--&gt;
	&lt;li class="ccay-form-row"&gt;
		&lt;samp class="i18n" i18nKey="title" /&gt;&lt;/samp&gt;
		&lt;span class="ccay-form-input"&gt;
		   &lt;input type="text" maxlength="200" /&gt;
		&lt;/span&gt;
	&lt;/li&gt;	
	&lt;li class="ccay-form-row"&gt;
		&lt;samp class="i18n" i18nKey="title" /&gt;&lt;/samp&gt;
		&lt;span class="ccay-form-input"&gt;
		   &lt;input type="text" maxlength="200" /&gt;
		&lt;/span&gt;
	&lt;/li&gt;
 &lt;/ul&gt;
       &lt;/div&gt;
&lt;!--<font color="green">操作区域与内容同级，div标签，class="ccay-operate" 内部可以使用input[button]和link button(a标签)</font>--&gt;
&lt;div class="ccay-operate"&gt;
	&lt;span class="ccay-button default" >
		&lt;a class="ccay-icon search">&lt;/a>
		&lt;label class="i18n" i18nKey="ccay.common.button.search">&lt;/label>
	&lt;/span>
	&lt;span class="init button ccay-button reset" >
		&lt;a class="ccay-icon reset">&lt;/a>
		&lt;label class="i18n" i18nKey="ccay.common.button.reset">&lt;/label>
	&lt;/span>
&lt;/div&gt;
&lt;/form&gt;
				</pre>
			</div>
		<div class='try'>
			<a onclick="Ccay.example.openTry('#searchDemo','',$('#searchForm2').html())">亲自试一试</a>
		</div>
		</div>
				<h4><span>实例3：多行查询条件</span></h4>
				<div style='padding-left:30px'>
				<div>
				<form class="init ccay-form" >					    
				<div class="ccay-form-body">
				 	<ul>
						<li class="ccay-form-row">
							<samp class="i18n" i18nKey="title" ></samp>
							<span class="ccay-form-input">
							   <input type="text" maxlength="200" />
							</span>
						</li>	
						<li class="ccay-form-row">
							<samp class="i18n" i18nKey="title" ></samp>
							<span class="ccay-form-input">
							   <input type="text" maxlength="200" />
							</span>
						</li>
					 </ul>
				 	 <ul>
						<li class="ccay-form-row">
							<samp class="i18n" i18nKey="title" ></samp>
							<span class="ccay-form-input">
							   <input type="text" maxlength="200" />
							</span>
						</li>	
						<li class="ccay-form-row">
							<samp class="i18n" i18nKey="title" ></samp>
							<span class="ccay-form-input">
							   <input type="text" maxlength="200" />
							</span>
						</li>
					 </ul>
		         </div>
		         <div class="ccay-operate">
		         	<span class="ccay-button default" >
						<a class="ccay-icon search"></a>
						<label class="i18n" i18nKey="ccay.common.button.search"></label>
					</span>
					<span class="init button ccay-button reset" >
						<a class="ccay-icon reset"></a>
						<label class="i18n" i18nKey="ccay.common.button.reset"></label>
					</span>
				</div>
				</form>
				</div>
			<div>
			</div>
			<h3>HTML Code</h3>
			<div class="codeArea">
				<pre id='searchForm3'>
&lt;!--<font color="green">所有的表单以form标签定义，class必须包括ccay-form，如果需要做验证的表单class加上init</font>--&gt;	
&lt;form class="init ccay-form" &gt;
&lt;!--<font color="green">区域内容以div标签包括，基础class="ccay-form-body"</font>--&gt;						    
&lt;div class="ccay-form-body"&gt;
&lt;!--<font color="green">主内容使用ul标签</font>--&gt;
 	&lt;ul&gt;
&lt;!--<font color="green">录入单位为一个title和一个input为主体，以li标签，基础class="ccay-form-row"，另外根据不同需求可以加入相应的class</font>--&gt;
		&lt;li class="ccay-form-row"&gt;
			&lt;samp class="i18n" i18nKey="title" /&gt;&lt;/samp&gt;
			&lt;span class="ccay-form-input"&gt;
			   &lt;input type="text" maxlength="200" /&gt;
			&lt;/span&gt;
		&lt;/li&gt;	
		&lt;li class="ccay-form-row"&gt;
			&lt;samp class="i18n" i18nKey="title" /&gt;&lt;/samp&gt;
			&lt;span class="ccay-form-input"&gt;
			   &lt;input type="text" maxlength="200" /&gt;
			&lt;/span&gt;
		&lt;/li&gt;
	 &lt;/ul&gt;
 	 &lt;ul&gt;
		&lt;li class="ccay-form-row"&gt;
			&lt;samp class="i18n" i18nKey="title" /&gt;&lt;/samp&gt;
			&lt;span class="ccay-form-input"&gt;
			   &lt;input type="text" maxlength="200" /&gt;
			&lt;/span&gt;
		&lt;/li&gt;	
		&lt;li class="ccay-form-row"&gt;
			&lt;samp class="i18n" i18nKey="title" /&gt;&lt;/samp&gt;
			&lt;span class="ccay-form-input"&gt;
			   &lt;input type="text" maxlength="200" /&gt;
			&lt;/span&gt;
		&lt;/li&gt;
	 &lt;/ul&gt;
       &lt;/div&gt;
&lt;!--<font color="green">操作区域与内容同级，div标签，class="ccay-operate" 内部可以使用input[button]和link button(a标签)</font>--&gt;
&lt;div class="ccay-operate"&gt;
	&lt;span class="ccay-button default" >
		&lt;a class="ccay-icon search">&lt;/a>
		&lt;label class="i18n" i18nKey="ccay.common.button.search">&lt;/label>
	&lt;/span>
	&lt;span class="init button ccay-button reset" >
		&lt;a class="ccay-icon reset">&lt;/a>
		&lt;label class="i18n" i18nKey="ccay.common.button.reset">&lt;/label>
	&lt;/span>
&lt;/div&gt;
&lt;/form&gt;
				</pre>
			</div>
		<div class='try'>
			<a onclick="Ccay.example.openTry('#searchDemo','',$('#searchForm3').html())">亲自试一试</a>
		</div>
		</div>
				<h4><span>实例4：特殊查询条件需要占一行</span></h4>
				<div style='padding-left:30px'>
				<div>
				<form class="init ccay-form" >					    
				<div class="ccay-form-body">
					 <ul>
						<li class="ccay-form-row ccay-form-range">
							<samp class="i18n" i18nKey="time"/>
							<span class='ccay-form-input'>
							  <input type="text" id="search_test_StartTime" name="search_test_StartTime" class="init ccay-calendar date" format="date"/>
							  <input type="text" id="search_test_EndTime" name="search_test_EndTime" class="init ccay-calendar date dateCompare" format="date" compareTo="#search_test_StartTime"/> 
							</span>
						</li>
					</ul>
		         </div>
		         <div class="ccay-operate">
		         	<span class="ccay-button default" >
						<a class="ccay-icon search"></a>
						<label class="i18n" i18nKey="ccay.common.button.search"></label>
					</span>
					<span class="init button ccay-button reset" >
						<a class="ccay-icon reset"></a>
						<label class="i18n" i18nKey="ccay.common.button.reset"></label>
					</span>
				</div>
				</form>
				</div>
			<div>
			</div>
			<h3>HTML Code</h3>
			<div class="codeArea">
				<pre id='searchForm4'>
&lt;!--<font color="green">所有的表单以form标签定义，class必须包括ccay-form，如果需要做验证的表单class加上init</font>--&gt;	
&lt;form class="init ccay-form" &gt;
&lt;!--<font color="green">区域内容以div标签包括，基础class="ccay-form-body"</font>--&gt;						    
&lt;div class="ccay-form-body"&gt;
&lt;!--<font color="green">主内容使用ul标签</font>--&gt;
	 &lt;ul&gt;
&lt;!--<font color="green">录入单位为一个title和一个input为主体，以li标签，基础class="ccay-form-row"，
另加入的class="ccay-form-range" 范围选择或前后关联的两个input使用</font>--&gt;
		&lt;li class="ccay-form-row ccay-form-range"&gt;
			&lt;samp class="i18n" i18nKey="time"/&gt;
			&lt;span class='ccay-form-input'&gt;
			  &lt;input type="text" id="search_test_StartTime" name="search_test_StartTime" class="init ccay-calendar date" format="date"/&gt;
			  &lt;input type="text" id="search_test_EndTime" name="search_test_EndTime" class="init ccay-calendar date dateCompare" format="date" compareTo="#search_test_StartTime"/&gt; 
			&lt;/span&gt;
		&lt;/li&gt;
	&lt;/ul&gt;
       &lt;/div&gt;
&lt;!--<font color="green">操作区域与内容同级，div标签，class="ccay-operate" 内部可以使用input[button]和link button(a标签)</font>--&gt;
&lt;div class="ccay-operate"&gt;
	&lt;span class="ccay-button default" >
		&lt;a class="ccay-icon search">&lt;/a>
		&lt;label class="i18n" i18nKey="ccay.common.button.search">&lt;/label>
	&lt;/span>
	&lt;span class="init button ccay-button reset" >
		&lt;a class="ccay-icon reset">&lt;/a>
		&lt;label class="i18n" i18nKey="ccay.common.button.reset">&lt;/label>
	&lt;/span>
&lt;/div&gt;
&lt;/form&gt;
				</pre>
			</div>
		<div class='try'>
			<a onclick="Ccay.example.openTry('#searchDemo','',$('#searchForm4').html())">亲自试一试</a>
		</div>
			</div>
				
				<h4><span>实例5：更多查询条件</span></h4>
				<div style='padding-left:30px'>
				<div>
				<form class="init ccay-form" >					    
				<div class="ccay-form-body">
		<ul>
		 <li class="ccay-form-row ccay-form-more">
				 <a id='btnMore' onclick="Ccay.Common.toggle(this,'#moreCondituions1')">More Search Conditions...</a>
			 </li>
		</ul>
		<ul id="moreCondituions1" style="display:none;">
				<li class="ccay-form-row">
					<samp class="i18n" i18nKey="title" ></samp>
					<span class="ccay-form-input">
					   <input type="text" maxlength="200" />
					</span>
				</li>
		 </ul>
		         </div>
		         <div class="ccay-operate">
		         	<span class="ccay-button default" >
						<a class="ccay-icon search"></a>
						<label class="i18n" i18nKey="ccay.common.button.search"></label>
					</span>
					<span class="init button ccay-button reset" >
						<a class="ccay-icon reset"></a>
						<label class="i18n" i18nKey="ccay.common.button.reset"></label>
					</span>
				</div>
				</form>
				</div>
			<div>
			</div>
			<h3>HTML Code</h3>
			<div class="codeArea">
				<pre id='searchForm5'>
&lt;!--<font color="green">所有的表单以form标签定义，class必须包括ccay-form，如果需要做验证的表单class加上init</font>--&gt;	
&lt;form class="init ccay-form" &gt;	
&lt;!--<font color="green">区域内容以div标签包括，基础class="ccay-form-body"</font>--&gt;					    
&lt;div class="ccay-form-body"&gt;
&lt;!--<font color="green">主内容使用ul标签</font>--&gt;
&lt;!--<font color="green">ul的class="ccay-form-more"</font>--&gt;
&lt;ul&gt;
 &lt;li class="ccay-form-row ccay-form-more"&gt;
 &lt;a id='btnMore' onclick="Ccay.Common.toggle(this,'#moreCondituions2')"&gt;More Search Conditions...&lt;/a&gt;
 &lt;/li&gt;
&lt;/ul&gt;
&lt;ul id="moreCondituions2" style="display:none;"&gt;
	&lt;li class="ccay-form-row"&gt;
		&lt;samp class="i18n" i18nKey="title" /&gt;&lt;/samp&gt;
		&lt;span class="ccay-form-input"&gt;
		   &lt;input type="text" maxlength="200" /&gt;
		&lt;/span&gt;
	&lt;/li&gt;
&lt;/ul&gt;
   &lt;/div&gt;
        &lt;div class="ccay-operate"&gt;
	&lt;span class="ccay-button default" >
		&lt;a class="ccay-icon search">&lt;/a>
		&lt;label class="i18n" i18nKey="ccay.common.button.search">&lt;/label>
	&lt;/span>
	&lt;span class="init button ccay-button reset" >
		&lt;a class="ccay-icon reset">&lt;/a>
		&lt;label class="i18n" i18nKey="ccay.common.button.reset">&lt;/label>
	&lt;/span>
	&lt;/div&gt;
&lt;/form&gt;
				</pre>
			</div>
		<div class='try'>
			<a onclick="Ccay.example.openTry('#searchDemo','',$('#searchForm5').html())">亲自试一试</a>
		</div>
			</div>
						</div>

</div>
</div>

<div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:50px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:300px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
     <div title="FAQ">
  <form class="init ccay-form">
    <div class="ccay-form-body">
    <ul>
    </ul>
</div>     
<div class="ccay-form-custom">
    <ul>                     
        <li class="ccay-form-row">
            <samp><h3>问题</h3></samp>
           <span class="ccay-form-input">
               <h3>解决方案</h3>
           </span>
        </li>
        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
        <li class="ccay-form-row">
                          <samp class="i18n" i18nKey=""></samp>                          
                         <span class="ccay-form-input"></span>
        </li>  
    </ul>
</div>
  </form>                    
</div>  
     
</div>	 
